<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'
import { HENAN } from './henan-map'
import { RankedBranch } from '@/api-scp/types'

echarts.registerMap('henan', HENAN as any)

@Component({
  name: 'MapChart'
})
export default class extends mixins(ResizeMixin) {
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '500px' }) private height!: string
  @Prop({ required: true }) private list!: RankedBranch[]

  private listLoading = true

  @Watch('list', { deep: true })
  private onListDataChange(value: RankedBranch[]) {
    this.listLoading = false
    this.setOptions(value)
  }

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.$parent.$on('highlight', this.highlightRegion)
    this.$parent.$on('cancel-highlight', this.cancelHighlight)
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)
    this.setOptions(this.list)
  }

  private setOptions(rbs: RankedBranch[]) {
    if (!this.chart) {
      return
    }

    const data = (rbs || []).map(rb => {
      return {
        name: rb.region,
        value: rb.value
      }
    })

    const option: EChartsOption = {
      visualMap: {
        show: true,
        type: 'piecewise',
        splitNumber: 4,
        // minOpen: true,
        maxOpen: true,
        precision: 0,
        top: 0
        // text: ['High', 'Low']
      },
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}&nbsp;&nbsp;&nbsp;&nbsp;<b>{c}</b>'
      },
      series: [
        {
          type: 'map',
          map: 'henan',
          roam: true,
          label: {
            show: true
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          selectedMode: false,
          data
        }
      ]
    }

    console.log(JSON.stringify(option, null, 2))

    this.chart.setOption(option)
  }

  private lastHighlight: string

  highlightRegion(name: string) {
    if (!this.chart) {
      return
    }
    if (this.lastHighlight && this.lastHighlight !== name) {
      this.chart.dispatchAction({
        type: 'downplay',
        name: this.lastHighlight
      })
    }
    this.chart.dispatchAction({
      type: 'highlight',
      name
    })
    this.lastHighlight = name
  }

  cancelHighlight(name: string) {
    if (!this.chart) {
      return
    }
    this.chart.dispatchAction({
      type: 'downplay',
      name
    })
    if (this.lastHighlight === name) {
      this.lastHighlight = null
    }
  }
}
</script>
